<template>
    <view>
        <view
            class="diy-dialog__wrapper unDraggabled"
            v-if="componentData.realVisible == 1"
            @click.stop="cancel"
            data-num="1"
            :style="'background-color:' + componentData.modalColor + ';z-index:' + (dialogZindex || componentData.dialogZindex) + ';'"
        >
            <view
                @click.stop="stop"
                :class="'diy-dialog ' + (componentData.hasShadow ? 'has_shadow' : '')"
                :style="
                    'background-color:' +
                    componentData.bgColor +
                    ';padding:' +
                    componentData.paddingTop * 2 +
                    'rpx ' +
                    componentData.paddingLeftRight * 2 +
                    'rpx ' +
                    componentData.paddingBottom * 2 +
                    'rpx;border-radius:' +
                    componentData.borderRadius * 2 +
                    'rpx;width:' +
                    componentData.width * 2 +
                    'rpx;margin-top:' +
                    (componentData.center === 1 ? '' : componentData.dialogTop * 2 + 'rpx') +
                    ';'
                "
            >
                <view
                    class="diy-dialog__header"
                    :style="
						'width:100%;height:30px;'+
                        'background-color:' +
                        componentData.titleBgColor +
                        ';color:' +
                        componentData.titleColor +
                        ';padding:' +
                        componentData.titlePaddingTopBottom * 2 +
                        'rpx ' +
                        componentData.titlePaddingLeftRight * 2 +
                        'rpx;'
                    "
                >
                    <view style="font-size: 14px;width: 100%;">{{ componentData.title }}</view>
                    <block v-if="componentData.closeIconType == 1">
                        <view>
                            <i @click.stop="cancel" class="iconfonts iconchahao"></i>
                        </view>
                    </block>
                    <block v-if="componentData.closeIconType == 2">
                        <view>
                            <i @click.stop="cancel" class="iconfont">×</i>
                        </view>
                    </block>
                    <block v-if="componentData.closeIconType == 3">
                        <view class="top-right-close-btn" :style="'background-color:' + componentData.bgColor + ';'">
                            <i @click.stop="cancel" class="iconfonts iconchahao"></i>
                        </view>
                    </block>
                    <block v-if="componentData.closeIconType == 4">
                        <view class="bottom-center-close-btn">
                            <i @click.stop="cancel" class="iconfont">×</i>
                        </view>
                    </block>
                </view>
                <view
                    class="diy-dialog__body"
                    @click.stop="stop"
                    :style="
                        'background-color:' +
                        componentData.bodyBgColor +
                        ';padding:' +
                        componentData.bodyPaddingTopBottom * 2 +
                        'rpx ' +
                        componentData.bodyPaddingLeftRight * 2 +
                        'rpx;height:' +
                        (componentData.height ? componentData.height * 2 + 'rpx' : 'auto') +
                        ';'
                    "
                >
                    <view v-for="(item, index) in componentData.componentData" :key="index">
                        <diy-video v-if="item.sign === 'diy-video'" :componentData="item" @callback="callback"></diy-video>

                        <diy-text v-if="item.sign === 'diy-text'" :componentData="item" @callback="callback"></diy-text>

                        <diy-goods v-if="item.sign === 'diy-goods'" :componentData="item" @callback="callback" :merchant="merchant" @toAddToCar="toAddToCar" @getSku="getSku"></diy-goods>

                        <diy-img v-if="item.sign === 'diy-img'" :componentData="item" @callback="callback"></diy-img>

                        <diy-coupon v-if="item.sign === 'diy-coupon'" :componentData="item" @callback="callback"></diy-coupon>

                        <!-- 新增容器组件 -->

                        <diy-wrap v-if="item.sign == 'diy-wrap'" :componentData="item.data.componentData" :config="item.data.config" @callback="callback"></diy-wrap>

                        <diy-doub-wrap v-if="item.sign == 'diy-doub-wrap'" :componentData="item.data.componentData" :config="item.data.config" @callback="callback"></diy-doub-wrap>

                        <diy-btn v-if="item.sign == 'diy-btn'" :componentData="item" :wrap="0" @callback="callback"></diy-btn>

                        <diy-word v-if="item.sign == 'diy-word'" :componentData="item" :wrap="0" @callback="callback"></diy-word>
                    </view>
                </view>
                <view
                    class="diy-dialog__footer"
                    :style="
                        'justify-content:' +
                        componentData.btnAlign +
                        ';background-color:' +
                        componentData.footerBgColor +
                        ';padding:' +
                        componentData.footerPaddingTopBottom * 2 +
                        'rpx ' +
                        componentData.footerPaddingLeftRight * 2 +
                        'rpx;'
                    "
                >
                    <view
                        v-if="componentData.calcelBtnText"
                        @click.stop="cancel"
                        class="diy-btn diy-btn-cancel"
                        :style="
							'font-size:12px;'+
                            'background-color:' +
                            componentData.calcelBtnBgColor +
                            ';border-color:' +
                            componentData.calcelBtnBorderColor +
                            ';color:' +
                            componentData.calcelBtnColor +
                            ';padding:' +
                            componentData.btnPaddingTopBottom * 2 +
                            'rpx ' +
                            componentData.btnPaddingLeftRight * 2 +
                            'rpx;'
                        "
                    >
                        {{ componentData.calcelBtnText }}
                    </view>
                    <view
                        v-if="componentData.confirmBtnText"
                        @click.stop="confirm"
                        class="diy-btn diy-btn-confirm"
                        :style="
							'font-size:12px;'+
                            'background-color:' +
                            componentData.confirmBtnBgColor +
                            ';border-color:' +
                            componentData.confirmBtnBorderColor +
                            ';color:' +
                            componentData.confirmBtnColor +
                            ';padding:' +
                            componentData.btnPaddingTopBottom * 2 +
                            'rpx ' +
                            componentData.btnPaddingLeftRight * 2 +
                            'rpx;'
                        "
                    >
                        {{ componentData.confirmBtnText }}
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
	var app = getApp().globalData
import diyText from '../diy-text/diy-text';
import diyGoods from '../diy-goods/diy-goods';
import diyImg from '../diy-img/diy-img';
import diyCoupon from '../diy-coupon/diy-coupon';
import diyVideo from '../diy-video/diy-video';
import diyBtn from '../diy-btn/diy-btn';
import diyWord from '../diy-word/diy-word';
import diyWrap from '../diy-wrap/diy-wrap';
import diyDoubWrap from '../diy-doub-wrap/diy-doub-wrap';
import { debounce } from '../util.js';
export default {
    components: {
        diyText,
        diyGoods,
        diyImg,
        diyCoupon,
        diyVideo,
        diyBtn,
        diyWord,
        diyWrap,
        diyDoubWrap
    },
    data() {
        return {
            dialogZindex: 0,
			store_id:0
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        componentData: {
            type: Object,
			default: {}
        },
		merchant: {
			type: Number,
			default:0
		}
    },
    beforeMount() {},
    mounted() {
		this.store_id = this.$root.store_id
		this.timeClose();
    },
    watch: {
        'componentData.realVisible': {
            handler: function (n) {
                if (n === 1) {
					this.timeClose();
                } else {
                    if (this.delayedFunc && this.delayedFunc.remove && typeof this.delayedFunc.remove === 'function') {
                        this.delayedFunc.remove();
                    }
                }
            },

            immediate: true,
            deep: true
        },
        'componentData.setDialogZindex': {
            handler: function (n) {
                if (n) {
                    this.setData({
                        dialogZindex: n
                    });
                }
            },

            immediate: true,
            deep: true
        }
    },
	data:function(){
		return {
			
		}
	},
    delayedFunc: null,
    /**
     * 组件的方法列表
     */
    methods: {
		getSku:function(data){
			return this.$emit("getSku",data);
		},
		toAddToCar:function(data){
			return this.$emit("toAddToCar",data);
		},
        getDelayFn() {
            this.delayedFunc = debounce(() => {
                // 1 显示 2，隐藏
                if (this.componentData.realVisible === 1) {
                    this.emitCancel();
                    this.delayedFunc = null;
                }
            }, 1000 * this.componentData.time);
            return this.delayedFunc;
        },

        timeClose() {
            if (this.componentData.time === 0) {
                return;
            }

            this.getDelayFn()();
        },

        stop() {
            return false;
        },

        callback(e) {
            const myEventDetail = { ...e.detail }; // console.log('diy-img-callback',e,myEventDetail);

            this.$emit('callback', {
                detail: myEventDetail
            });
        },

        cancel(e) {
            if (!this.componentData.modalClose && e.currentTarget.dataset.num) {
                return;
            }

            this.emitCancel(e);
        },

        confirm(e) {
            this.emitCancel(e);
        },

        emitCancel(e) {
            const myEventDetail = {
                event: e,
                method: 'closeDialog',
                data: {
                    type: 'closeDialog',
                    value: this.componentData.id
                }
            }; // 关闭时 重置 dialogZindex 为 0

            this.setData({
                dialogZindex: 0
            });
            this.$emit('callback', {
                detail: myEventDetail
            });
        }
    }
};
</script>
<style>
@import './diy-dialog.css';
</style>
`